<template>
  <div>
    <!-- 头部 -->
    <van-nav-bar title="MM新资讯" fixed v-if="cIsVisiable">
      <template #right>
        <van-button
          round
          icon="search"
          size="normal"
          @click="$router.push('/search')"
          >搜索</van-button
        >
      </template>
      <div slot="left" class="logo"></div>
    </van-nav-bar>
    <!-- 主体 -->
    <!-- 如果当前的路由对象上有 isKeepAlive 这个标识就缓存，否则就不缓存 -->
    <keep-alive>
      <router-view v-if="$route.meta.isKeepAlive"/>
    </keep-alive>

    <router-view   v-if="!$route.meta.isKeepAlive" />
    <!-- 底部 -->
    <van-tabbar v-model="active" fixed>
      <van-tabbar-item icon="home-o" to="./">首页</van-tabbar-item>
      <van-tabbar-item icon="chat-o" to="./question">问答</van-tabbar-item>
      <van-tabbar-item icon="video-o" to="./video">视频</van-tabbar-item>
      <van-tabbar-item icon="user-o" to="./user">{{
        $store.getters.isLogin ? "我的" : "未登录"
      }}</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<style lang="less" scoped>
.van-button--round {
  font-size: 11px;
  width: 80px;
  height: 30px;
  background-color: #5babfb;
  border-color: #6a92ad;
  color: #fff;
  .van-icon {
    color: #fff;
  }
}
.logo {
  width: 30px;
  height: 30px;
  background: url("../assets/img/mm.png");
  background-size: cover;
}
</style>

<script>
export default {
  name: 'Layout',
  data () {
    return {
      active: 0
    }
  },
  computed: {
    cIsVisiable () {
      // 只有在个人中心页才不可见
      return this.$route.path !== '/user'
    }
    // ...mapGetters(['isLogin'])
  }
  // TODO:
}
</script>
